<template>
	<div class="inspectionunit">
		<div style="width: 100%;height: 100%;">
			<div class="containercontent" style="padding-bottom:0;">
				<div class="penalrow selectw100">
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle">
							客户
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-input v-model="searchName" size="mini" placeholder="客户名" @keyup.enter.native="readClients"></el-input>
						</div>

					</div>
					<div class="inlineblock basicRightDistanceA searchIcon">
						<el-button size="mini" @click="readClients">搜索</el-button>
					</div>
				</div>
				<div class="paddingALL" style="height:calc((100% / 2) - 25px);">
					<div class="tableTittle">
						<div class="">
							<span class="fontImpact">1</span>
							<span>客户信息</span>
						</div>
            <form id="fileForm1" style="display:none">
              <input type="file" name="file" id="file1" @change="upload1">
            </form>
						<el-button style="float: right;" type="primary" size="mini" @click="addPop('addUser')" icon="el-icon-plus" v-if="userOpernation.add.display">添加客户</el-button>
            <el-button type="primary"  size="mini" @click="importExcel" style="float:right;margin-right:6px;" v-if="userOpernation.upload.display">导入</el-button>
            <el-button type="primary"  size="mini" @click="downloadTem" style="float:right;" v-if="userOpernation.upload.display">下载模板</el-button>

          </div>
					<div class="" style="width: 100%;height:calc(100% - 40px);overflow: auto;">
						<el-table :data="customerInfo" style="width: 100%;height:calc(100% - 10px)" class="tableCon" ref="customerInfo1" highlight-current-row
						 size="mini" @row-click="detectionArea">
							<el-table-column label="序号" fixed min-width="50px">
								<template slot-scope="scope">
									{{scope.$index+1}}
								</template>
							</el-table-column>
							<el-table-column property="name" label="客户" min-width="100px"  show-overflow-tooltip>
							</el-table-column>
							<el-table-column property="clientType" label="类型" min-width="120px" :formatter='readClientStyle'>
							</el-table-column>
							<el-table-column property="factoryDate" label="建厂日期" min-width="120px" :formatter="formatterTime">
                <template slot-scope="scope">
                  {{scope.row.hasOwnProperty('factoryDate') && scope.row.factoryDate != '' ?scope.row.factoryDate:'---' }}
                </template>
              </el-table-column>
							<el-table-column property="contact" label="联系人" min-width="120px">
                <template slot-scope="scope">
                  {{scope.row.hasOwnProperty('contact') && scope.row.contact != '' ?scope.row.contact:'---' }}
                </template>
							</el-table-column>
							<el-table-column property="phone" label="联系电话" min-width="120px">
                <template slot-scope="scope">
                  {{scope.row.hasOwnProperty('phone') && scope.row.phone != '' ?scope.row.phone:'---' }}
                </template>
							</el-table-column>
							<el-table-column property="address" label="地址" min-width="120px" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{scope.row.hasOwnProperty('address') && scope.row.address != '' ?scope.row.address:'---' }}
                </template>
							</el-table-column>
							<el-table-column property="status" label="状态" min-width="80px" :formatter = "formatter">
							</el-table-column>
							<el-table-column label="操作"  min-width="140px">
								<template slot-scope="scope">
									<!--<el-button @click="editMethods(scope.row,'look')" type="text" size="mini">详情</el-button>-->
									<el-button v-if="scope.row.status == 1 && userOpernation.disable.display" type="text" size="mini" @click.stop="isStart(scope.row)">停用</el-button>
                      				<el-button v-if="scope.row.status == 0 && userOpernation.enable.display" type="text" size="mini" @click.stop="isStart(scope.row)">启用</el-button>

									<el-button @click="editUserType(scope.row,'editUser')" type="text" size="mini" v-if="scope.row.status != 0 && userOpernation.update.display">编辑</el-button>
									<el-button @click="delMethods(scope.row,'/client/delClient.htm',1)" type="text" size="mini" v-if="userOpernation.delete.display">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<el-dialog :visible.sync="adduserShow" width="55%" :show-close='false' :closeOnClickModal='false'>
					<span slot="title" class="dialog-title">
		  			{{newOrEditUser=='new'?'新增':'编辑'}}客户信息
			    	<el-button @click="close('userForm')" size="mini" class="popupClose">关闭</el-button>
					</span>
					<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="userForm" :rules="userRules" ref="userForm">
						<el-form-item label="" prop="id" style="width: 0;height:0;margin: 0;">
							<el-col :span="0">
								<el-input type="hidden" size="mini" placeholder="名称" v-model="userForm.id"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="类型" prop="clientType">
							<el-col :span="22">
								<el-select size="mini" v-model="userForm.clientType" style="width: 100%;">
									<el-option v-for="item in clientSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-col :span="22">
								<el-input size="mini" placeholder="名称" v-model="userForm.name"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="客户地址" prop="address">
							<el-col :span="22">
								<el-input size="mini" placeholder="地址" v-model="userForm.address"></el-input>
							</el-col>
						</el-form-item>

						<el-form-item label="建厂日期" prop="factoryDate">
							<el-col :span="22">
								<el-date-picker value-format="yyyy-MM-dd" type="date" size="mini" placeholder="选择日期" v-model="userForm.factoryDate" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
						<el-form-item label="联系人" prop="contact">
							<el-col :span="22">
								<el-input size="mini" placeholder="联系人" v-model="userForm.contact"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="联系电话" prop="phone">
							<el-col :span="22">
								<el-input size="mini" placeholder="联系电话" v-model="userForm.phone"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="排序" prop="sort">
							<el-col :span="22">
								<el-input size="mini" placeholder="排序" v-model="userForm.sort"></el-input>
							</el-col>
						</el-form-item> 
					</el-form>
					<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="operate(userForm,(newOrEditUser=='new'?1:11),1)" size="mini" :disabled="!isRepeat">确 定</el-button>
			    <el-button  size="mini" @click="close('userForm')">取 消</el-button>
			  </span>
				</el-dialog>
				<!--监测区域列表-->
				<div style="height:calc((100% / 2) - 25px);margin-top:0;background:#fff;">
					<div class="paddingALL" style="width:50%;height:100%;display:inline-block;">
						<div class="tableTittle">
							<div class="">
								<span class="fontImpact">2</span>
								<span>监测区域</span>
							</div>
							<el-button style="float: right;" type="primary" size="mini" @click="addPop('addArea')" icon="el-icon-plus" v-if="userOpernation.add.display">添加监测区域</el-button>
						</div>
						<div class="" style="width: 100%;height:calc(100% - 40px);">
							<el-table :data="customerInfoTwo" style="width: 100%;overflow: auto;height:100%;" class="tableCon" ref="customerInfo2" highlight-current-row
							 size="mini" key="areatable" @cell-click="detectionSpot">
								<el-table-column label="序号" fixed min-width="50px">
									<template slot-scope="scope">
										{{scope.$index+1}}
									</template>
								</el-table-column>
								<el-table-column property="name" label="监测区域" min-width="100px">
								</el-table-column>
								<el-table-column label="操作"  min-width="100px">
									<template slot-scope="scope">
										<el-button @click="editUserType(scope.row,'editArea')" type="text" size="mini" v-if="userOpernation.update.display">编辑</el-button>
										<el-button @click="delMethods(scope.row,'/client/deleteMonitorZone.htm',2)" type="text" size="mini" v-if="userOpernation.delete.display">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<!--添加检测区域列表-->
						<el-dialog :visible.sync="addDetectionAreaShow" width="55%" :show-close='false' :closeOnClickModal='false'>
							<span slot="title" class="dialog-title">
		  				{{newOrEditArea=='new'?'新增':'编辑'}}监测区域
			    		<el-button @click="close('areaForm')" size="mini" class="popupClose">关闭</el-button>
						</span>
							<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="areaForm" :rules="areaRules" ref="areaForm">
								<el-form-item label="名称" prop="name">
									<el-col :span="22">
										<el-input size="mini" placeholder="区域名称" v-model="areaForm.name"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="简称" prop="alias">
									<el-col :span="22">
										<el-input size="mini" placeholder="区域简称" v-model="areaForm.alias"></el-input>
									</el-col>
								</el-form-item>
                <el-form-item label="消毒方式" prop="disinfect">
                	<el-col :span="22">
                    <el-select size="mini" v-model="areaForm.disinfect" style="width: 100%;">
                    	<el-option v-for="item in disinfectList.itemList" :key="item.code" :label="item.name" :value="item.code">
                    	</el-option>
                    </el-select>
                	</el-col>
                </el-form-item>
                <el-form-item label="评价标准" prop="standard">
                	<el-col :span="22">
                    <el-cascader :options="standardList" v-model="standardValue" size="mini" style="width:100%;"
                      filterable class="cascader"  @change = "change" >
                    </el-cascader>
                    <!-- <el-select size="mini" v-model="areaForm.standard" style="width: 100%;">
                    	<el-option v-for="item in disinfectList.itemList" :key="item.code" :label="item.name" :value="item.code">
                    	</el-option>
                    </el-select> -->
                	</el-col>
                </el-form-item>

								<el-form-item label="备注" prop="remark">
									<el-col :span="22">
										<el-input type="textarea" v-model="areaForm.remark"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="排序" prop="sort">
									<el-col :span="22">
										<el-input size="mini" placeholder="排序" v-model="areaForm.sort"></el-input>
									</el-col>
								</el-form-item> 
							</el-form>
							<span slot="footer" class="dialog-footer">
					    <el-button type="primary" @click="operate(areaForm,(newOrEditArea=='new'?2:21),2)" size="mini">确 定</el-button>
					    <el-button  size="mini" @click="close('areaForm')">取 消</el-button>
					  </span>
						</el-dialog>
					</div>
					<!--监测点列表-->
					<div class="paddingALL" style="height:100%;width:50%;display:inline-block;float: right;">
						<div class="tableTittle">
							<div class="">
								<span class="fontImpact">3</span>
								<span>监测点</span>
							</div>
							<el-button style="float: right;" type="primary" size="mini" @click="addPop('addPoint')" icon="el-icon-plus" v-if="userOpernation.add.display">添加监测点</el-button>
						</div>
						<div class="" style="width: 100%;height:calc(100% - 40px);">
							<el-table :data="customerInfoThree" style="width: 100%;overflow: auto;height:calc(100% - 10px)" class="tableCon" highlight-current-row
							 size="mini" key="pointtable">
								<el-table-column label="序号"  min-width="50px">
									<template slot-scope="scope">
										{{scope.$index+1}}
									</template>
								</el-table-column>
								<el-table-column property="name" label="监测点" min-width="100px" show-overflow-tooltip>
								</el-table-column>
								<el-table-column property="sampleType" label="样品类型" min-width="80px" :formatter="sampleSelect2">
								</el-table-column>
								<el-table-column property="monitorType" label="监测点类型" min-width="90px" :formatter="monitorSelect2">
								</el-table-column>
								<el-table-column label="操作" min-width="100px">
									<template slot-scope="scope">
										<el-button @click="editUserType(scope.row,'editPoint')" type="text" size="mini" v-if="userOpernation.update.display">编辑</el-button>
										<el-button @click="delMethods(scope.row,'/client/deleteMonitor.htm',3)" type="text" size="mini" v-if="userOpernation.delete.display">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<!--添加检测点列表-->
						<el-dialog :visible.sync="addDetectionPointShow" width="55%" :show-close='false' :closeOnClickModal='false'>
							<span slot="title" class="dialog-title">
		  				{{newOrEditPoint=='new'?'新增':'编辑'}}监测点
			    		<el-button @click="close('pointForm')" size="mini" class="popupClose">关闭</el-button>
						</span>
							<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="pointForm" :rules="pointRules" ref="pointForm">
								<el-form-item label="检测对象" prop="monitorObj">
									<el-col :span="22">
										<el-select size="mini" v-model="pointForm.monitorObj" style="width: 100%;" @change="funone" @focus="funone">
											<el-option v-for="item in objectSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
											</el-option>
										</el-select>
									</el-col>
								</el-form-item>
								<el-form-item label="样品类型" prop="sampleType">
									<el-col :span="22">
										<el-select size="mini" v-model="pointForm.sampleType" style="width: 100%;" @change="funTwo">
											<el-option v-for="item in sampleTypeSel" :key="item.code" :label="item.name" :value="item.code">
											</el-option>
										</el-select>
									</el-col>
								</el-form-item>
								<el-form-item label="监测点类型" prop="monitorType">
									<el-col :span="22">
										<el-select size="mini" v-model="pointForm.monitorType" style="width: 100%;">
											<el-option v-for="item in monitorTypeSel" :key="item.code" :label="item.name" :value="item.code">
											</el-option>
										</el-select>
									</el-col>
								</el-form-item>
								<el-form-item label="监测点来源" prop="sourceType">
									<el-col :span="22">
										<el-input size="mini" placeholder="监测点来源" v-model="pointForm.sourceType"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="监测点名称" prop="name">
									<el-col :span="22">
										<el-input size="mini" placeholder="监测点名称" v-model="pointForm.name"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="评价标准" prop="standard">
									<el-col :span="22">
									<el-cascader :options="standardList" v-model="standardValue1" size="mini" style="width:100%;"
									filterable class="cascader"  @change = "change" >
									</el-cascader>
									<!-- <el-select size="mini" v-model="areaForm.standard" style="width: 100%;">
										<el-option v-for="item in disinfectList.itemList" :key="item.code" :label="item.name" :value="item.code">
										</el-option>
									</el-select> -->
									</el-col>
								</el-form-item>
								<el-form-item label="采样地点" prop="samplePlace">
									<el-col :span="22">
										<el-input size="mini" placeholder="采样地点" v-model="pointForm.samplePlace"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="地理位置" prop = "latLng" class="maplogo">
								<el-input v-model="pointForm.latLng" size="mini" disabled>
									<template slot="append">
									<el-button @click="openMap" size="mini" icon="el-icon-location"></el-button>
									</template>
								</el-input>
								</el-form-item>
								<el-form-item label="排序" prop="sort">
									<el-col :span="22">
										<el-input size="mini" placeholder="排序" v-model="pointForm.sort"></el-input>
									</el-col>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
					    <el-button type="primary" @click="operate(pointForm,(newOrEditPoint=='new'?3:31),3)" size="mini">确 定</el-button>
					    <el-button  size="mini" @click="close('pointForm')">取 消</el-button>
					  </span>
						</el-dialog>
					</div>
				</div>
			</div>

		</div>
    <div >
      <map-component
        name="mapComponent"
        :flag-dialog-show.sync="mapShow"
        :map-msg="mapMsg"
        @getLnglat="getLnglat"
        @getRadius="getRadius"
      ></map-component>
    </div>
	</div>

</template>

<script>
	import { mapState } from 'vuex'
  import mapComponent from "./mapComponent.vue";
	export default {
		data() {
			return {
				checkAreaShow: true, //检测区域table默认隐藏
				checkSpotShow: true, //检测点table默认隐藏
				customerInfo: [], //第一级客户信息数据
				customerInfoTwo: [], //第二级客户信息数据
				customerInfoThree: [], //第三级客户信息数据
				userLength: '', //保存客户信息数据长度
				areaLength: '', //保存检查区域数据长度
				pointLength: '', //保存检查点数据长度
				checkRow: {}, //选中的客户
				checkRow1: {}, //选中的检测区域
				searchName: '', //查询条件的名字
				userForm: {
					id: '',
					name: '',
					address: '',
					clientType: '',
					factoryDate: '',
					contact: '',
					phone: '',
					sort: ''
				},
				userRules: { //表单验证规则
					name: [{
						required: true,
						type: 'string',
						message: '请填写客户名称',
						trigger: 'blur'
					},],
					// address: [{
					// 	required: true,
					// 	type: 'string',
					// 	message: '请填写客户地址',
					// 	trigger: 'blur'
					// }, ],
					clientType: [{
						required: true,
						type: 'string',
						message: '请选择客户类型',
						trigger: 'blur'
					},],

				},
				rowIdOne: '', //添加时带上第一级父元素的id
				rowIdTwo: '', //添加时带上第二级父元素的id
				adduserShow: false,
				newOrEditUser: 'new', //点击客户信息  --添加、编辑按钮的变量（新增、修改）
				newOrEditArea: 'new', //点击检测区域  --添加、编辑按钮的变量（新增、修改）
				newOrEditPoint: 'new', //点击监测点  --添加、编辑按钮的变量（新增、修改）
				enableStatusValue: '',
				addDetectionAreaShow: false, //检测区域添加 显示变量
				areaForm: { //检测区域列表
					fRef: '',
					name: '',
					clientName: '',
					code: '',
					alias: '',
					remark: '',
					disinfect:'',
					standard:[],
					sort: ''
				},
				areaRules: {
					name: [{
						required: true,
						type: 'string',
						message: '请填写区域',
						trigger: 'blur'
					},],
					clientName: [{
						required: true,
						type: 'string',
						message: '请填写客户',
						trigger: 'blur'
					},],
					code: [{
						required: true,
						type: 'string',
						message: '请填写代码',
						trigger: 'blur'
					},],
				},
				addDetectionPointShow: false, //检测点 添加 编辑弹出框变量
				pointName: '', //保存监测区域的名称name
				pointForm: {
					monitorObj: 'DOA',
					client: '',
					fRef: '',
					name: '',
					samplePlace: '',
					monitorType: '',
					sourceType: '',
					sampleType: '',
					// [22.575827785586775,114.15359687798627]
					// longitude:114.15359687798627,          //经度
					// latitude:22.575827785586775,           //纬度
					longitude:null,
					latitude:null,
					standard:[],
					sort: ''
				},
				pointRules: {
					monitorObj: [{
						required: true,
						type: 'string',
						message: '请输入检测对象',
						trigger: 'change'
					},],
					name: [{
						required: true,
						type: 'string',
						message: '请输入监测点名称',
						trigger: 'blur'
					},],
					monitorType: [{
						required: true,
						type: 'string',
						message: '请选择检测点类型',
						trigger: 'change'
					},],
					sampleType: [{
						required: true,
						type: 'string',
						message: '请选择样品类型',
						trigger: 'change'
					},],
				},
				isRepeat: true,
				typeofAbilityTableDateValue: '',
				analysisItemTypeValue: '',
				roundingTypeValue: '',
				currentPage: 1,
				sampleTypeSel: [],
				monitorTypeSel: [],
        standardList:[], //评价标准列表
        // propsObj:{
        //   value:"code",
        //   label:"name",
        //   children:"children"
        // },
        standardValue:[],
        standardValue1:[],
        mapShow: false, // 地图组件显示控制
        mapMsg: {type: 1},
			}
		},
		computed: {
			...mapState(['objectSelect', 'sampleSelect', 'monitorSelect', 'clientSelect', 'enableStatus', 'tableHeightA',
       'inspectionUnitType', 'inspectionUnitTableDate', 'tableHeightC', 'detectionAreaTableDate',
       'detectionPointTableDate','disinfectList']),
		},
    created(){
      this.$store.dispatch('dogetDictionary') //全局数据字典
    },
		mounted() {
			this.readClients();
      this.getStandard();
			//this.objectSelect.itemList[1]

		},
		props: ["userOpernation"],
    components:{
      mapComponent
    },
		watch: {

		},
		methods: {
      // 打开地图插件
      openMap () {
        this.mapMsg.type = 1
        // if(this.pointForm.latitude == 0 || this.pointForm.latitude == "" ||  this.pointForm.latitude == null){
        //   this.mapMsg.center = {lat:114.15359687798627,lng:22.575827785586775}
        // }else{
          if(this.pointForm.latitude != null){
            this.mapMsg.center = {lat:this.pointForm.latitude,lng:this.pointForm.longitude}
          }else{
			  this.mapMsg.center = null;
		  }
        // }
        this.mapMsg.newOrEdit = this.newOrEditPoint
        this.mapShow = true
      },
      // 得到子组件传递的值
      getLnglat (data) {
        this.pointForm.latLng = '[' + data[1] + ',' + data[0] + ']'
        this.pointForm.longitude = data[0]
        this.pointForm.latitude = data[1]
      },
      getRadius (data) {
        this.pointForm.effectiveRadius = data
      },
      getStandard() {
        this.$http({
          method: 'post',
          apiUrl: '/technology/readStandardByType.htm',
        }).then(res => {
          if (res.code === 0) {
            // res.data.forEach((item)=>{
            //   item.value = item.code
            //   item.label = item.name

            // })
            this.standardList = res.data;

          }
        })
      },
      change(val){
        console.log(val)
      },
			 formatter(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })

			},
			isStart(row) {
				var msg = row.status == 0 ? "启用" : "停用";
				var url = row.status == 0 ? "/client/enableClient.htm" : "client/disableClient.htm";
				this.$confirm("是否" + msg, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						apiUrl: url,
						params: {
							id: row.id,
							status: row.status == 0 ? 1 : 0,
						},
						isJson: false,
					}).then(res => {
						if (res.code === 0) {

							this.readClients();
						}

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消' + msg
					});
				});
			},
			funone() {//检测对象筛选下一层数据
				this.monitorTypeSel = [];
				this.pointForm.monitorType = '';
				this.pointForm.sourceType = '';
				this.pointForm.sampleType = '';
				var code = this.pointForm.monitorObj;
				var arr = this.sampleSelect.itemList;
				this.sampleTypeSel = this.selectTyleFun(code, arr);

			},
			funTwo() {//样品类型筛选下一层数据
				this.monitorTypeSel = [];
				this.pointForm.monitorType = '';
				this.pointForm.sourceType = '';
				console.log(this.pointForm.sampleType)
				var code = this.pointForm.sampleType;
				var arr = this.monitorSelect.itemList;
				this.monitorTypeSel = this.selectTyleFun(code, arr);
			},
			selectTyleFun(code, arr) {//筛选数据方法
				var newArr = [];
				for (var i in arr) {
					if (arr[i].code.indexOf(code) != -1) {
						newArr.push(arr[i])
					}
				}
				return newArr;
			},
			formatterTime(row, column) { //截取时间
				return (row.factoryDate).substring(0, 10)
			},
			groupFormatter(row, column, cellValue, index) { //状态启用停用..显示方法
				var list = this.enableStatus;
				var res = null;
				list.forEach(function (item, index) {
					if (cellValue == item.value) {
						res = item.label;
					}
				})
				return res ? res : cellValue;
			},
			readClientStyle(row, column, cellValue, index) { //客户类型 显示方法
				var list = this.clientSelect.itemList;
				var res = null;
				list.forEach(function (item, index) {
					if (cellValue == item.code) {
						res = item.name;
					}
				})
				return res ? res : cellValue;
			},
			sampleSelect2(row, column, cellValue, index) { //样品类型转换
				var list = this.sampleSelect.itemList;
				var obj = {
					cellValue: cellValue,
					list: list
				};
				return this.codeChangeName(obj);
			},
			monitorSelect2(row, column, cellValue, index) {
				var list = this.monitorSelect.itemList;
				var obj = {
					cellValue: cellValue,
					list: list
				};
				//调用全局方法
				//this.$store.commit("codeChangeName",obj);
				//return this.$store.state.dictionary;

				return this.codeChangeName(obj);

			},
			/**
			 * 状态字段转换方法 （客户 、样品类型、检测点类型）
			 * @cellValue 对比值
			 * @list 数组对象
			 */
			codeChangeName(obj) {
				var cellValue = obj.cellValue;
				var list = obj.list;
				if (cellValue == undefined || cellValue == '') {
					return "";
				}
				var res = null;
				for (var i in list) {
					if (cellValue === list[i].code) {
						res = list[i].name;
						break;
					}
				}
				return res ? res : cellValue;
			},
			//客户信息数据第一级数据显示
			readClients(pram) {
				var params = {
					name: this.searchName,
				};
				this.$http({
					method: 'post',
					apiUrl: '/client/readClients.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.customerInfo = res.data;
						this.userLength = res.data.length; //保存客户信息的数据长度在全局变量中
						// 每次刷新客户 默认选中第一个客户，如果第一个客户下检测区域不为空，默认选中第一个检测区域
						if (res.data.length == 0) {
							this.customerInfoTwo = [];
							this.customerInfoThree = [];
						} else {
							this.$refs.customerInfo1.setCurrentRow(this.customerInfo[0]);
							this.detectionArea(this.customerInfo[0], { label: '客户' });
						}
					}

				})
			},

			//检测区域类型  点击一级列表显示二级
			detectionArea(row, column, event) {
				console.log(row)
				for (var i in row) {
					this.checkRow[i] = row[i]
				}
				this.areaForm.fRef = row.id;
				this.rowIdOne = row.id;
				// if (column.label != '操作') {
					var data = {
						id: row.id
					}
					//获取某用户下的监测区域
					this.getAreaByClient(data);
				// }
			},
			//获取某用户下的监测区域
			getAreaByClient(data) {
				this.$http({
					method: 'post',
					apiUrl: '/client/readClientById.htm',
					params: data,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.checkAreaShow = true;
						this.customerInfoTwo = res.data;
						if (this.customerInfoTwo.length == 0) {
							this.customerInfoThree = [];
							this.rowIdTwo = '';
						} else {
							this.$refs.customerInfo2.setCurrentRow(this.customerInfoTwo[0]);
							this.detectionSpot(this.customerInfoTwo[0], { label: '监测区域' });
						}
						this.areaLength = res.data.length; //保存客户信息的数据长度在全局变量中
					}

				})
			},
			//检测点类型  点击二级列表显示三级
			detectionSpot(row, column, cell, event) {
				for (var i in row) {
					this.checkRow1[i] = row[i]
				}
				this.pointForm.fRef = row.id;
				this.pointForm.client = row.fRef;
				this.rowIdTwo = row.id;
				// if (column.label != '操作') {
					var data = {
						fRef: row.id
					}
					//获取某监测区域下的监测点
					this.getdetectionSpot(data)
				// }
			},
			//获取某监测区域下的监测点
			getdetectionSpot(data) {
				this.$http({
					method: 'post',
					apiUrl: '/client/readMonitor.htm',
					params: data,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.checkSpotShow = true;
						this.customerInfoThree = res.data;
						this.pointLength = res.data.length; //保存客户信息的数据长度在全局变量中
					}

				})
			},
			//添加用户信息/检测区域/检测点--用于弹出框
			addPop(newOrEdit) {
				this.funone();//默认检测对象数据
				if (newOrEdit == 'addUser') { //客户信息添加
					this.userForm.sort = 9999
					this.newOrEditUser = 'new';
					this.adduserShow = true;

				} else if (newOrEdit == 'addArea') { //检测区域添加
					this.areaForm.sort = 9999
					this.areaForm.fRef = this.rowIdOne;
					this.newOrEditArea = 'new';
					this.addDetectionAreaShow = true

				} else if (newOrEdit == 'addPoint') { //检测点添加
					if(this.rowIdTwo == ''){
						this.$notify({
							type:"warning",
							title:"警告",
							message:"请选择监测区域"
						})
						return;
					}
					this.pointForm.sort = 9999
					this.pointForm.client = this.checkRow.id
					this.pointForm.fRef = this.rowIdTwo;
          // let tempLat = this.pointForm.latitude?this.pointForm.latitude:0
          // let tempLng = this.pointForm.longitude?this.pointForm.longitude:0
          this.pointForm.latLng = ''

          // this.pointForm.latLng = '[' + this.pointForm.latitude +
          //     ',' + this.pointForm.longitude + ']'
					this.newOrEditPoint = 'new';
					this.addDetectionPointShow = true;
				}
			},
			// 编辑用户信息
			editUserType(row, editOrLook) {

				if (editOrLook == 'editUser') { //客户信息编辑
					this.newOrEditUser = 'edit';
					this.adduserShow = true;
					for (var i in row) { //赋值
						this.userForm[i] = row[i]
					}
				} else if (editOrLook == 'editArea') { //检测区域编辑
					this.newOrEditArea = 'edit';
					this.addDetectionAreaShow = true;
					for (var i in row) { //赋值
						this.areaForm[i] = row[i]
					}
          this.standardValue = this.getTreeDeepArr(this.areaForm.standard, this.standardList)
          // userForm.standard

				} else if (editOrLook == 'editPoint') { //检测点编辑

					this.newOrEditPoint = 'edit';
					this.addDetectionPointShow = true;
					this.pointForm.monitorObj = row.monitorObj
					this.pointForm.sampleType = row.sampleType //好像多余的
					this.funone();//默认检测对象数据
					this.pointForm.sampleType = row.sampleType
					this.funTwo();
					for (var i in row) { //赋值
						this.pointForm[i] = row[i]
					}
           			this.standardValue1 = this.getTreeDeepArr(this.pointForm.standard, this.standardList)
					this.pointForm.client = this.checkRow.id;
					if(this.pointForm.latitude != null){
						this.pointForm.latLng = '[' + this.pointForm.latitude +
							',' + this.pointForm.longitude + ']'
					}


				}
			},
			close(formName) {
				this.$refs[formName].resetFields();
				this.isRepeat = true;
				if (formName == 'userForm') { //关闭客户信息弹窗
					this.userForm = {
						name: '',
						address: '',
						clientType: '', //CLA
						factoryDate: '',
						contact: '',
						phone: '',
						sort: ''
					};
					this.adduserShow = false;
				} else if (formName == 'areaForm') {
					this.areaForm = { //检测区域列表
						fRef: '',
						name: '',
						clientName: '',
						code: '',
						alias: '',
            disinfect:'',
            standard:[],
						remark: '',
					}
					this.addDetectionAreaShow = false;
          this.standardValue = [];
				} else if (formName == 'pointForm') {
					this.pointForm = {
						fRef: '',
						name: '',
						monitorType: '',
						sourceType: '',
						client:'',
						clientName: '',
						monitorZoneName: '',
						monitorObj: 'DOA',
						sampleType: '',
            // longitude:114.15359687798627,          //经度
            // latitude:22.575827785586775,           //纬度
            longitude:null,
            latitude:null,
            standard:[],
					}
          this.pointForm.latLng = ''
					this.addDetectionPointShow = false;
          this.standardValue1 = [];
				}
			},
			//操作
			operate(data, interfaces, leve) {
				console.log("show me data", data);
				var subUrl = null;
				if (interfaces == 1) { //客户的添加接口
					subUrl = "/client/addClient.htm";
				}
				if (interfaces == 11) { //客户的修改接口
					subUrl = "/client/updateClient.htm";
				}
				if (interfaces == 2) { //监测区域的添加接口
					subUrl = "/client/createMonitorZone.htm";
				}
				if (interfaces == 21) { //监测区域的修改接口
					subUrl = "/client/updateMonitorZone.htm";
				}
				if (interfaces == 3) { //监测点的添加接口
					subUrl = "/client/createMonitor.htm";
				}
				if (interfaces == 31) { //监测点的修改接口
					subUrl = "/client/updateMonitor.htm";
				}
        console.log(data)
				this.validateInfo(data, subUrl, interfaces, leve);
			},
			//验证必填字段
			validateInfo(userForm, subUrl, interfaces, leve) {
				console.log("show form", userForm, subUrl, interfaces, leve);
				if (interfaces == 1 || interfaces == 11) {
					this.$refs.userForm.validate((valid) => { //表单验证
						if (valid) {
							this.submit(userForm, subUrl, leve);
						}
					})
				}
				if (interfaces == 2 || interfaces == 21) {
					this.$refs.areaForm.validate((valid) => { //表单验证
						if (valid) {
              if (this.standardValue.length === 1) {
              	userForm.standard = this.standardValue[0]
              } else {
              	userForm.standard = this.standardValue[this.standardValue.length - 1]
              }
							this.submit(userForm, subUrl, leve);
						}
					})
				}
				if (interfaces == 3 || interfaces == 31) {
					this.$refs.pointForm.validate((valid) => { //表单验证
						if (valid) {
              if (this.standardValue1.length === 1) {
              	userForm.standard = this.standardValue1[0]
              } else {
              	userForm.standard = this.standardValue1[this.standardValue1.length - 1]
              }
							this.submit(userForm, subUrl, leve);
						}
					})
				}

			},
			//提交数据
			submit(userForm, subUrl, leve) {

				this.isRepeat = false;
				this.$http({
					method: 'post',
					apiUrl: subUrl,
					params: userForm,
					isJson: false,
				}).then(res => {
					this.isRepeat = true;
					if (res.code == 0) {
						this.colseFun(leve);
						this.commonFun(leve);
						this.$notify({
							title:"成功",
							type: 'success',
							message: '操作成功!'
						});

					}
				}).catch(() => {

				});
			},

      // 递归组装数据
      getTreeDeepArr(key, treeData) {
			  let arr = []; // 在递归时操作的数组
			  let returnArr = []; // 存放结果的数组
			  let depth = 0; // 定义全局层级
			  // 定义递归函数
			  function childrenEach(childrenData, depthN) {
			    for (var j = 0; j < childrenData.length; j++) {
			      depth = depthN; // 将执行的层级赋值 到 全局层级
			      arr[depthN] = (childrenData[j].value);
			      if (childrenData[j].value == key) {
			        // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
			        returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
			        break
			      } else {
			        if (childrenData[j].children) {
			          depth++;
			          childrenEach(childrenData[j].children, depth);
			        }
			      }
			    }
			    return returnArr;
			  }
			  return childrenEach(treeData, depth);
			},

      //删除方法
			delMethods(row, delUrl, leve) {
				this.$confirm('是否删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						apiUrl: delUrl,
						params: {
							id: row.id,
						},
						isJson: false,
					}).then(res => {
						if (res.code === 0) {
							this.commonFun(leve); //刷新当前界面 -- 删除
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			//根据条件刷新当前界面 -- 删除 、编辑、新增
			commonFun(leve) {
				if (leve == 1) { //刷新客户信息
					this.readClients();

				} else if (leve == 2) { //刷新监测区域
					var data = {
						id: this.rowIdOne
					}
					this.getAreaByClient(data); //刷新当前表格的数据
				} else { //刷新监测点
					var data = {
						fRef: this.rowIdTwo
					}

					this.getdetectionSpot(data);
				}

			},
			//根据条件关闭弹窗
			colseFun(leve) {
				if (leve == 1) { //关闭客户弹窗信息
					this.adduserShow = false;
					this.close('userForm');
				} else if (leve == 2) { //关闭监测区域弹窗
					this.addAreaShow = false;
					this.close('areaForm');
				} else { //关闭监测点弹窗
					this.addPointShow = false;
					this.close('pointForm');
				}
			},
      importExcel() { // 模拟file的点击事件
        document.getElementById("file1").click()
      },
      // 导入文件
      upload1(event) {
        var files = document.getElementById('file1').files[0];
        var formData = new FormData();
        formData.append('file', files)
        this.$axios({
          method: 'post',
          url: '/client/addClientByExcel.htm',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            'token':sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
          }
        }).then(res => {
          event.target.value= "";
          if (res.data.code == 0) {
            this.$notify({
              title: '消息',
              message: res.data.description,
              type: 'success'
            })
           this.readClients()
          } else {
            this.$notify({
              title: '消息',
              type: 'warning',
              message: res.data.description,
            })
          }

        })
      },
      //
      downloadTem(){
        var url = "/client/getClientMould.htm";
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + "?token=" + token)
      },

			changeInspectionUnitStatus(row) {
				console.log(row);
			},


		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.inspectionunit {}

	.penalrow {
		padding: 10px 20px;
	}

	.paddingALL {
		padding: 10px 20px;
		background: #fff;
	}

	.tableTittle>div {
		width: 100px;
	}

	.tableTittle>div>span:nth-of-type(2) {
		left: auto;
		right: auto;
	}

</style>
<style>
  .maplogo .el-form-item__content{
    width:calc(100% - 150px);
  }
</style>
